<template>
	<div>
		<div class="pl-6 pr-6">
			<el-card class="!border-none pt-6 pl-4 pr-4" shadow="never">
				<el-form class="ls-form" :model="formData" inline>
					<el-form-item label="">
						<el-input class="w-[280px]" placeholder="请输入" v-model="formData.admin_name" clearable
							@keyup.enter="resetPage" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="resetPage">搜索</el-button>
						<el-button @click="resetParams" class="main-color1">重置</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card class="!border-none pl-4 pr-4" shadow="never">
				<el-table size="large" :data="pager.lists" v-loading="pager.loading"
				:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}"
				@selection-change="handleSelectionChange"
				>
					<el-table-column type="selection" align="center" width="50" />
					<el-table-column label="序号"  align="center" width="90">
						1
					</el-table-column>
					<el-table-column label="产品编码"  align="center">
						123456
					</el-table-column>
					<el-table-column label="产品图片" prop="scene_name" align="center" width="150">
						<el-avatar shape="square" :size="50" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
					</el-table-column>
					<el-table-column label="产品名称" prop="type_desc" align="center" />
					<el-table-column label="产品型号" prop="scene_name" align="center" />
					<el-table-column label="产品材质"  align="center">
						金属
					</el-table-column>
					<el-table-column label="件数(pcs)"  align="center">
						2
					</el-table-column>
					<el-table-column label="预计单重(kg/件)" align="center">
						10kg
					</el-table-column>
					<el-table-column label="单价(USD/pcs)"  align="center">
						2
					</el-table-column>
					<el-table-column label="产品分类" align="center" >
						<template #default="{ row }">
							机械
						</template>	
					</el-table-column>	
					<el-table-column label="产品库存" align="center" >
						<template #default="{ row }">
							333
						</template>	
					</el-table-column>
					<el-table-column label="仓库名称" align="center" >
						<template #default="{ row }">
							1号仓
						</template>	
					</el-table-column>
					<el-table-column label="备注" fixed="right" align="center" >
						<template #default="{ row }">
							备注11111111
						</template>
					</el-table-column>
				</el-table>
			</el-card>
			<div class="mt-[40px]">
				<el-button class="main-color1 w-[76px]" >取消</el-button>
				<el-button class="w-[76px] bg-[#0054A6]" type="primary" >保存</el-button>
			</div>
		</div>	
	</div>
</template>

<script lang="ts" setup>
	import { computed, onMounted, reactive, ref, shallowRef } from 'vue'
	import { getRoutePath } from '@/router'
	import { noticeLists } from '@/api/message'
	import { usePaging } from '@/hooks/usePaging'
	import feedback from '@/utils/feedback'
	const formData = reactive({
		admin_name: '',
		url: '',
		ip: '',
		type: '',
		start_time: '',
		end_time: ''
	})
	const selectData = ref<any[]>([])
	const handleSelectionChange = (val: any[]) => {
	    selectData.value = val.map(({ id }) => id)
	}
	// 列表数据
	
	const { pager, getLists } = usePaging({
	    fetchFun: noticeLists,
	})
	const handleDelete = async (id: number) => {
	    await feedback.confirm('确定要删除？')
	    // await menuDelete({ id })
	    getLists()
	}
	onActivated(() => {
	    getLists()
	})
	
	getLists()
	
	
</script>

<style lang="scss" scoped>
	.el-set-form:deep() .el-form-item__label{
		color: var(--el-text-color-main);
		height: 36px;
		line-height: 36px;
	}
	.el-set-form:deep() .el-input__inner{
		height: 36px;
	}
	.el-set-form:deep() .el-input__inner::placeholder {
		color: var(--el-text-color-main);
	}
</style>